<template>
    <div class="nav">
      <router-link class="nav-item" to='/'>Home</router-link>
      <router-link class="nav-item" to='/contact'>Contact</router-link>
      <router-link class="nav-item" to='/projects'>Projects</router-link>
      <router-link class="nav-item" to='/news'>News</router-link>
    </div>

    <router-view/>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const count = ref(0)
    const inc = () => {
      count.value++
    }

    return {
      count,
      inc
    }
  }
}
</script>

<style>
html, body {
  position: relative;
  height: 100%;
  width: 100%;
}
body {
  overflow: hidden;
  margin: 0;
}
.nav {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  z-index: 101;
}
.nav-item {
  padding: 1rem;
}

</style>
